<template>
    <span  @click="loadData">
        <div class="el-image">
            <img :src="base64" alt=""  class="img " style="object-fit: fill;" @error="error">
        </div>
    </span>
</template>

<script>
export default {
  name: 'CustomImg',
  data() {
    return {
      defaultImg: '../../assets/imgerror.png',
      // base64: ' L25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENTgxOTJBNEIyRUMxMUUyOTVCM0VGQkMzRDkyMEU0RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENTgxOTJBNUIyRUMxMUUyOTVCM0VGQkMzRDkyMEU0RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1ODE5MkEyQjJFQzExRTI5NUIzRUZCQzNEOTIwRTRFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ1ODE5MkEzQjJFQzExRTI5NUIzRUZCQzNEOTIwRTRFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAKQAhAwERAAIRAQMRAf/EAHIAAAEFAQEBAAAAAAAAAAAAAAQAAwUGBwIBCQEBAAAAAAAAAAAAAAAAAAAAABAAAgEDAgIGBgsAAAAAAAAAAQIDABESIQRBBTFhcaEiE1GBkTJSBsFCYnKS0iNjkxQWEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD7+UEBuufQQOUiUSAGxkJsCR04gAk9vRQNbb5gWVmDQ5Kup8oksB2MBf1GgsMciSokkbB0kAZGHEGg7oB93n/V3Plm0nlNgeuxtQZcxBxPEgX+geyg9MrtiCcVU3AUWA69KDQeRsX5bCSb+J7HqyNBL0Au9R5NnuY4/feNlXtIoMuIIJDLiwNmU6WI4UCAvQX/AOX45I9h4xiJHLRjo8JA19dqCcoFQZzzpIxzPcCLRdM7fFbWgDhRWkjV/cLKH+7fXuoNQVVRVVRZVFgBQdUGdz85324uDOyj4I/0x3eLvoAsg9shZhxGt7m+t+NA/Fipvjl9k6DX00Bic3n2wCxzObaCMnNR+LXvoH/9JvP2f42/PQVwcaAheNA79RuygAoFQf/Z',
      base64: null,
      groupId: '1'
    }
  },
  props: ['item', 'field'],
  computed: {
    loginInfo() {
      return this.$store.getters.getLoginInfo
    },
  },
  methods: {
    renderImgs(item) {
      if (item.indexOf('base64') !== -1) {
        return [item];
      } else {
        return item.split(',');
      }
    },
    loadData() {
      if (this.item['TRSID']) {
        this.groupId = this.item['TRSID'];
      } else {
        this.groupId = Math.floor(Math.random()*100000);
      }
      this.$axiosInstance({
        url: this.src(),
        method: 'get',
        resId: ResIds.resId_getImage,
        headers: {
          serviceID: '0cdb126e7e8743739b7880ad3b695ef4',
          secretKey: 'c7beeecaa9582402a9372cef2b744d47'
        },
        params: {
          // idCard: this.$Search.formData.searchword,
          // userName: this.LoginInfo.xm,
          // orgCode: this.LoginInfo.deptId,
          ...this.loginInfo,
          url: (this.item[this.field.tableField]),
          type: this.field.subField,
          no: Math.random()*99999
        }
      }).then(result => {
        if (!result) return;
        this.base64 = result.data.data;
      }).catch(e => {
        alert(e);
      });
    },
    src() {
      switch (this.field.subField) {
      case 2:
      case 3:
      case 4:
        return  '/getImage';
      default: {
        return this.item[this.field.tableField];
      }
      }
    },
    error(event) {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    }
  },
  mounted() {
    this.loadData();
  }
}
</script>

<style scoped lang="less">
    .el-image{
        height: 100%;
        padding:2px 4px;
    }
    .img-prev {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        img {
            padding: 0;
            width: 74px;
            height: 97px;
            min-width: 20vw;
        }
    }
</style>
